<template>
  <div class="post_echarts">
    <div class="mt-4" id="post_echart" ref="post_echart" style="width: 600px; height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {getPostCnt} from '@/api/Discussion'


export default {
   name: "post_cnt",
  data(){
    return{
      que_ok:0,
      exp_ok:0,
      life_ok:0,
      oth_ok:0,

      que_nook:0,
      exp_nook:0,
      life_nook:0,
      oth_nook:0,

      que:0,
      exp:0,
      life:0,
      oth:0,

    }
  },
  methods:{
    //显示用户数量的图表
    getUserCntChart(){

      getPostCnt({}).then(res=>{
        //待审核
        this.que=res.data.que;
        this.exp=res.data.exp;
        this.life=res.data.life;
        this.oth=res.data.oth;
        //审核通过
        this.que_ok=res.data.que_ok;
        this.exp_ok=res.data.exp_ok;
        this.life_ok=res.data.life_ok;
        this.oth_ok=res.data.oth_ok;
        //审核不通过
        this.que_nook=res.data.que_nook;
        this.exp_nook=res.data.exp_nook;
        this.life_nook=res.data.life_nook;
        this.oth_nook=res.data.oth_nook;

        let option ={
          // 图例
          legend: {
            data: ["待审核数", "审核通过数","审核不通过数"],
            top: "0%", // 设置图例位置在顶部
            right: -5,  //调整图例位置
          },

          title: {
            text: '帖子数量',
            textStyle: { // 标题的样式
              fontSize: '22px', // 字体大小
              textAlign:'center',
            },

          },
          tooltip: {},
          xAxis: {
            name:'帖子类别',
            data: ['求助问答','学长学姐说','日常生活','其他']
          },
          yAxis: {
            name:'数量',
            type:'value',
            axisLine:{
              show:false
            }
          },
          series:[
            {
              name: '待审核数',
              emphasis: {//折线图的高亮状态。
                focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
              },
              type: 'bar', // 类型为柱状图
              stack:"Search Engine",
              data: [this.que,this.exp,this.life,this.oth],
              barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
              // 柱子的样式
              itemStyle: {
                color: '#5574c2'
              },
            },
            {
              name: '审核通过数',
              type: 'bar', // 类型为柱状图
              stack:"Search Engine",
              emphasis: {//折线图的高亮状态。
                focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
              },
              data: [this.que_ok,this.exp_ok,this.life_ok,this.oth_ok],
              barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
              // 柱子的样式
              itemStyle: {
                color: '#cc99cc'
              },
            },
            {
              name: '审核不通过数',
              type: 'bar', // 类型为柱状图
              stack:"Search Engine",
              emphasis: {//折线图的高亮状态。
                focus: "series",//聚焦当前高亮的数据所在的系列的所有图形。
              },
              data: [this.que_nook,this.exp_nook,this.life_nook,this.oth_nook],
              barWidth: '20%', // 柱条宽度 每个柱条的宽度就是类目宽度的 20%
              // 柱子的样式
              itemStyle: {
                color: '#80C68D'
              },
            },

          ]
        };
        setTimeout(function (){
          let post_echart = echarts.init(document.getElementById("post_echart"));
          post_echart.setOption(option);
        },1000)


      });


    },
  },
  mounted() {


  },
  created() {
    let _this=this;
    _this.getUserCntChart();
  }
}
</script>

<style scoped>

</style>
